<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css">
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input  class="form-control" type="text">
  <button type="button" class="btn">基本按钮</button>
  <button type="button" class="btn btn-primary">主要按钮</button>
  <button type="button" class="btn btn-secondary">次要按钮</button>
  <button type="button" class="btn btn-success">成功</button>
  <button type="button" class="btn btn-info">信息</button>
  <button type="button" class="btn btn-warning">警告</button>
  <button type="button" class="btn btn-danger">危险</button>
  <button type="button" class="btn btn-dark">黑色</button>
  <button type="button" class="btn btn-light">浅色</button>
  <button type="button" class="btn btn-link">链接</button>

  <hr>

  <a href="#" class="btn btn-info" role="button">链接按钮</a>
  <button type="button" class="btn btn-info">按钮</button>
  <input type="button" class="btn btn-info" value="输入框按钮">
  <input type="submit" class="btn btn-info" value="提交按钮">
  <input type="reset" class="btn btn-info" value="重置按钮">
  <hr>
  <button type="button" class="btn btn-outline-primary">主要按钮</button>
  <button type="button" class="btn btn-outline-secondary">次要按钮</button>
  <button type="button" class="btn btn-outline-success">成功</button>
  <button type="button" class="btn btn-outline-info">信息</button>
  <button type="button" class="btn btn-outline-warning">警告</button>
  <button type="button" class="btn btn-outline-danger">危险</button>
  <button type="button" class="btn btn-outline-dark">黑色</button>
  <button type="button" class="btn btn-outline-light text-dark">浅色</button>
  <hr>
  <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
  <button type="button" class="btn btn-primary">默认按钮</button>
  <button type="button" class="btn btn-primary btn-sm">小号按钮</button>

  <hr>

  <div class="d-grid">
    <button type="button" class="btn btn-primary btn-block">按钮 1</button>
  </div>

  <hr>

  <div class="d-grid gap-3">
    <button type="button" class="btn btn-primary btn-block">100% 宽度的按钮</button>
    <button type="button" class="btn btn-primary btn-block">100% 宽度的按钮</button>
    <button type="button" class="btn btn-primary btn-block">100% 宽度的按钮</button>
  </div>
  <hr>
  <button type="button" class="btn btn-primary active">点击后的按钮</button>
  <button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
  <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>

  <hr>
  <h1>加载按钮</h1>
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>

  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>

  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>

  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>

  <h1>按钮组</h1>

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>

  <hr>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>垂直按钮组</h3>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>

  <hr>

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>

  <hr>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tablet</a></li>
        <li><a class="dropdown-item" href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
  <br>
  <hr>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-primary">BMW</button>
    <button type="button" class="btn btn-primary">Mercedes</button>
    <button type="button" class="btn btn-primary">Volvo</button>
  </div>

  <h1>徽章</h1>
  <span class="badge bg-primary">主要</span>
  <span class="badge bg-secondary">次要</span>
  <span class="badge bg-success">成功</span>
  <span class="badge bg-danger">危险</span>
  <span class="badge bg-warning">警告</span>
  <span class="badge bg-info">信息</span>
  <span class="badge bg-light">浅色</span>
  <span class="badge bg-dark">深色</span>
  <h3>药丸徽章</h3>
  <span class="badge rounded-pill bg-default">默认</span>
  <span class="badge rounded-pill bg-primary">主要</span>
  <span class="badge rounded-pill bg-success">成功</span>
  <span class="badge rounded-pill bg-info">信息</span>
  <span class="badge rounded-pill bg-warning">警告</span>
  <span class="badge rounded-pill bg-danger">危险</span>

  <button type="button" class="btn btn-primary">
    Messages <span class="badge bg-light">4</span>
  </button>
  <hr>
  <h1>进度条</h1>
  <div class="progress">
    <div class="progress-bar" style="width:0"></div>
  </div>



  <script>
    let currentWidth = 0;
    const targetWidth = 100; // 设置目标宽度（以像素为单位）
    let i = 0;
    intervalId= setInterval(() => {
      currentWidth += 1; // 每次增加1像素
      $('.progress-bar').css('width', currentWidth + '%');
      console.log($('.progress')[0])
      console.log(currentWidth)
      
      $('.progress-bar').text(currentWidth + '%');
      // 
      if (currentWidth >= targetWidth) {
        clearInterval(intervalId); // 达到目标宽度后停止定时器


        
      }
    }, 100);




  </script>
</body>

</html>